<template>
    <div>
      <div style="width:100%;height:65vw;" id="map"></div>
    </div>
</template>

<script>
  import BMap from 'BMap'
  import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'
    export default {
        name: "contactmap",
      mounted(){
        this.baiduMap();
      },
      methods:{
          baiduMap(){
            function initMap(){
              createMap();//创建地图
              setMapEvent();//设置地图事件
              addMapControl();//向地图添加控件
              addMapOverlay();//向地图添加覆盖物
            }
            function createMap(){
              map = new BMap.Map("map");
              map.centerAndZoom(new BMap.Point(120.324426,30.301179),19);
            }
            function setMapEvent(){
              map.enableScrollWheelZoom();
              map.enableKeyboard();
              map.enableDragging();
              map.enableDoubleClickZoom()
            }
            function addClickHandler(target,window){
              target.addEventListener("click",function(){
                target.openInfoWindow(window);
              });
            }
            function addMapOverlay(){
              var markers = [
                {content:"我的备注",title:"纳品网线下体验店地址",imageOffset: {width:0,height:3},position:{lat:30.30185,lng:120.32448}}
              ];
              for(var index = 0; index < markers.length; index++ ){
                var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
                var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
                    imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
                  })});
                var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
                var opts = {
                  width: 200,
                  title: markers[index].title,
                  enableMessage: false
                };
                var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
                marker.setLabel(label);
                addClickHandler(marker,infoWindow);
                map.addOverlay(marker);
              };
            }
            //向地图添加控件
            function addMapControl(){
              var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
              scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
              map.addControl(scaleControl);
              var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
              map.addControl(navControl);
              var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
              map.addControl(overviewControl);
            }
            var map;
            initMap();
        }
      }
    }
</script>

<style scoped>
  .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
  .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
